<style lang="less">
.article-list {
    .article-list-title {
        padding: 20px 0px;
    }

    .article-list-footer {
        margin-top: 15px;
    }
}
</style>
<template>
    <div class="article-list">
        <h3 class="article-list-title">文章列表</h3>
        <div class="article-list-wrap">
            <el-table
                :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
                style="width: 100%">
                <el-table-column label="序号" width="80">
                    <template slot-scope="scope">
                        <div class="demo">
                            <span>{{ scope.$index + 1 }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="ID" prop="id" width="80"></el-table-column>
                <el-table-column label="标题" prop="title"></el-table-column>
                <el-table-column label="作者" prop="author"></el-table-column>
                <el-table-column label="日期" prop="createAt"></el-table-column>
                <el-table-column label="导航分类">
                    <template slot-scope="scope">
                        <div class="demo">
                            <span>{{ scope.row.cate }}</span> #
                            <span>{{ scope.row.cate_name }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="标签">
                    <template slot-scope="scope">
                        <div class="demo">
                            <span>{{ scope.row.tag }}</span>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column align="right" width="180">
                    <template slot="header">
                        <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
                    </template>
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">查看详情</el-button>
                        <el-button size="mini" type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="article-list-footer">
            <el-pagination 
                @current-change="currentChangeFn" 
                background layout="prev, pager, next" 
                :page-size="5"
                :pager-count="7" 
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>

import { Message } from "element-ui";
import { itemsArticle ,deleteArticle} from "../../api/index"

export default {
    data() {
        return {
            tableData: [
                // {
                //     id: 1,
                //     title: "标题1",
                //     author: "作者1",
                //     cate: "菜单1",
                //     cate_name: "二级菜单",
                //     tag: "标签1,标签2,标签3",
                //     craeteAt: "2025-10-14 14:38:20",
                //     content: "文章",
                // },
            ],
            search: '',
            page_num: 1,// 第几页
            page_size: 5,//多少
            total: 0
        }
    },
    methods: {
        // 编辑
        handleEdit(index, row) {
            console.log(index, row);
        },
        // 删除
        handleDelete(index, row) {
            console.log(index, row);
            // 询问一下管理员
            if(confirm("您确定要删除这篇文章吗")){
                // 删除文章
                 this.deleteArticleFn(row.id);
            }
        },
        // 当前页
        currentChangeFn(index) {
            console.log("index:", index);
            this.page_num = index;
            this.itemsArticleFn();
        },
        // 获取文章列表
        async itemsArticleFn() {
            let page_num = this.page_num 
            let page_size = this.page_size
            await itemsArticle({ page_num, page_size })
                .then(
                    resData => {
                        // console.log(resData)
                        if(resData.code==200){
                            this.tableData = resData.data;
                            this.total = resData.total;
                        }
                    }
                )
        },
        // 删除文章
        async deleteArticleFn(id){
            let token = localStorage.getItem("AUTO_TOKEN");
            if(token){
                await deleteArticle({token, id})
                .then(
                    resData=>{
                         // 删除成功
                         console.log(resData)
                         if(resData.code == 200){
                            Message({type:"success",message:resData.msg})
                            this.itemsArticleFn();
                         }
                         else {
                            Message({type:"error",message:resData.msg})
                         }
                    }
                )
            }
            else {
                Message({type:"error",message:"您还没有登录"})
            }
        },
    },
    created() {
        //  初始化
        this.itemsArticleFn();
    },
    watch: {
        $route: {
            immediate: true,
            deep: true,
            handler(newRoute) {
                // console.log(newRoute);
                this.$store.commit("addTab", newRoute);
            }
        }
    }
}

</script>